<template>
  <div class="content-wrap">
    <div class="details-foot-bar">
      <div class="follow"></div>
      <div class="btn">
        <div class="share"></div>
        <div @click="lookPoster" class="poster">生成推荐二维码</div>
      </div>
    </div>
    <div class="info-card">
      <div class="base">
        <img
          class="image"
          :src="detail.product_img"
        />
        <div class="title">
          <div class="name">{{detail.product_name}}</div>
          <div class="desc">无需芝麻免押</div>
        </div>
      </div>
      <div class="data">
        <div class="item">
          <div class="info">
            <div class="num">{{detail.longest_date}}</div>
          </div>
          <div class="text">可租期限(月)</div>
        </div>
        <div class="item">
          <div class="info">
            <div class="num">{{detail.pase_rate}}</div>
          </div>
          <div class="text">通过率</div>
        </div>
      </div>
    </div>
    <div class="info-other">
        <div class="other">
            <div class="noscroll">
                <div class="promotionNotice item">
                    <div class="title">推广要点</div>
                    <div v-html="detail.promotionNotice" class="text-area-content"></div>
                </div>
                <div class="productElements item">
                    <div class="title">产品要素</div>
                    <div v-html="detail.product_elements" class="content"></div>
                </div>
                <div class="accessRequirements item">
                    <div class="title">准入要求</div>
                    <div v-html="detail.access_requirements" class="content"></div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
    import request from '@/utils/request'
    import { ref,onMounted } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    const route = useRoute();
    const router = useRouter();
    const detail = ref({})
    onMounted(()=>{
        request({
            url:'/App/api/getProductInfo',
            method:'POST',
            data:{
                product_id:route.query.product_id
            }
        }).then((res)=>{
            res.data.access_requirements = replaceHtml(res.data.access_requirements);
            res.data.promotionNotice = replaceHtml(res.data.promotionNotice);
            res.data.product_elements = replaceHtml(res.data.product_elements);
            detail.value = res.data
        })
    })
    const replaceHtml = (html)=>{
        return html.replace(/\\n/g,'')
    }
    const lookPoster = ()=>{
        router.push(`/home/poster?product_img=${detail.value.product_img}&poster_img=${detail.value.poster_img}&qr_url=${encodeURIComponent(detail.value.qr_url)}`)
    }
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 100%;
  background: url(/assets/bg-user.png) 0 -2rem/100% auto no-repeat;
  background-color: #f4f4f4;
  overflow: hidden;
  padding-bottom: 1.84rem;
  padding-bottom: calc(1.84rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(1.84rem + env(safe-area-inset-bottom));
}

.catalogue-wrap {
  position: fixed;
  right: 0;
  top: 10%;
  z-index: 11;
  transition: all 0.4s ease-in-out;
}

.hide {
  transform: translate(100%);
}

.catalogue-wrap .info-wrap {
  width: 2.533333rem;
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  padding-top: 12rem;
  background-color: #fff;
  box-shadow: 0 0.053333rem 0.266667rem #d4d4d4;
  transition: all 0.4s ease-in-out;
  position: relative;
}

.catalogue-wrap .info-wrap .in {
  width: 2.4rem;
  height: 0.746667rem;
  margin: 0 auto;
  border-bottom-left-radius: 0.4rem;
  border-top: 0.026667rem solid #f2f2f2;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-back2.png)
    50%/0.293333rem 0.266667rem no-repeat;
}

.details-foot-bar {
  font-family: PinFang;
  width: 100%;
  height: 1.573333rem;
  background-color: #fff;
  box-shadow: 0 0.053333rem 0.266667rem #ddd;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 12;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.details-foot-bar .follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.386667rem;
  height: 1.066667rem;
  position: relative;
}

.details-foot-bar .follow .icon {
  width: 0.48rem;
  height: 0.4rem;
  margin-top: 0.133333rem;
  margin-bottom: 0.133333rem;
}

.details-foot-bar .follow .unfollow {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-follow.png)
    50%/100% 100% no-repeat;
}

.details-foot-bar .follow .text {
  font-size: 0.293333rem;
  color: #666;
  font-weight: 500;
}

.details-foot-bar .btn .share {
  width: 3.466667rem;
  height: 1.066667rem;
  //background: url(https://cdn.jipaikeji.com/statics/weapp/btn/btn-share.png) 50%/100% 100% no-repeat
}

.details-foot-bar .btn .poster {
  margin-left: -0.133333rem;
  width: 4.746667rem;
  height: 1.066667rem;
  line-height: 1.066667rem;
  text-align: center;
  font-size: 0.426667rem;
  color: #fff;
  background: url(https://cdn.jipaikeji.com/statics/weapp/btn/btn-poster3.png)
    50%/100% 100% no-repeat;
}

.details-foot-bar .btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info-card {
  width: 9.36rem;
  margin: 0.32rem auto 0;
  background-color: #fff;
  border-radius: 0.213333rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-card .base {
  width: 8.4rem;
  margin: 0.4rem auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 0.4rem;
  border-bottom: 0.026667rem solid #f2f2f2;
}

.info-card .base .image {
  width: 1.466667rem;
  height: 1.466667rem;
  border-radius: 0.133333rem;
}

.info-card .base .title {
  width: 4.666667rem;
  margin-left: 0.266667rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-card .base .title .name {
  font-size: 0.426667rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 0.066667rem;
}

.info-card .base .title .desc {
  font-size: 0.373333rem;
  color: #666;
  font-weight: 500;
}

.info-card .message {
  width: 8.72rem;
  margin: 0.266667rem auto 0.32rem;
  height: 0.933333rem;
}

.info-card .message .van-notice-bar {
  height: 0.933333rem;
  background-color: #eff8ff;
  color: #1677ff;
  font-size: 0.373333rem;
  font-weight: 700;
  position: relative;
}

.info-card .data {
  width: 8.4rem;
  margin: 0.426667rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-card .data .item {
  flex: 1;
  margin-bottom: 0.133333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-card .data .item .info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info-card .data .item .info .num {
  font-size: 0.533333rem;
  font-weight: 700;
  color: #1677ff;
}

.info-card .data .item .text {
  font-size: 0.32rem;
  color: #999;
  font-weight: 400;
}

.info-commission {
  width: 9.36rem;
  background-color: #fff;
  margin: 0.213333rem auto 0;
  border-radius: 0.213333rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-commission .title {
  width: 8.826667rem;
  height: 1.066667rem;
  margin: 0 auto;
  border-bottom: 0.026667rem solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-commission .title .name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info-commission .title .name .icon {
  width: 0.426667rem;
  height: 0.426667rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-fysm.png)
    50%/100% 100% no-repeat;
  margin-right: 0.213333rem;
}

.info-commission .commission {
  width: 8rem;
  margin: 0.346667rem auto;
  display: flex;
  flex-direction: column;
}

.info-commission .commission .tr {
  width: 8rem;
  box-sizing: border-box;
  background-color: #f8fbff;
  color: #555c67;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-left: 0.053333rem solid #d7dfea;
  border-top: 0.053333rem solid #d7dfea;
}

.info-commission .commission .tr .td {
  width: 4rem;
  height: 0.933333rem;
  line-height: 0.933333rem;
  text-align: center;
  font-size: 0.373333rem;
  color: #555c67;
  font-weight: 700;
  border-right: 0.053333rem solid #d7dfea;
}

.info-commission .commission .tr:last-child {
  border-bottom: 0.053333rem solid #d7dfea;
}

.info-commission .tips {
  width: 8rem;
  margin: 0.266667rem auto;
  font-size: 0.373333rem;
  color: #666;
  font-weight: 500;
}

.info-other {
  width: 9.36rem;
  margin: 0.266667rem auto 0;
  padding-top: 0.56rem;
  background: url(@/assets/bg-product-details-tiao.png)
    top/100% auto no-repeat;
}

.info-other .other {
  width: 8.826667rem;
  margin: -0.106667rem auto 0;
  padding-bottom: 0.4rem;
  background: #fff;
  overflow: hidden;
}

.info-other .other .noscroll {
  overflow: hidden;
}

.info-other .other .item {
  overflow: hidden;
  padding-bottom: 0.666667rem;
}

.info-other .other .item .title {
  font-size: 0.426667rem;
  margin: 0.213333rem 0.32rem 0.373333rem;
  color: #333;
  font-weight: 700;
}

.info-other .other .item .text-area-content {
  width: 8.026667rem;
  margin-left: 0.426667rem;
  font-size: 0.373333rem;
  color: #666;
  font-weight: 500;
  word-break: break-all;
  white-space: pre-line;
  position: relative;
}

.info-other .other .item .text-area-content .cur {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.info-other .other .item .text-area-content .city {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 0.266667rem;
  margin-left: 0.266667rem;
}

.info-other .other .item .text-area-content .city .text {
  font-size: 0.373333rem;
  color: #333;
  font-weight: 700;
}

.info-other .other .item .text-area-content .city .icon {
  width: 0.533333rem;
  height: 0.533333rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-edit.png)
    50%/100% no-repeat;
}

.info-other .other .item .text-area-content .apply {
  width: 1.6rem;
  height: 0.64rem;
  text-align: center;
  line-height: 0.64rem;
  border-radius: 0.053333rem;
  font-size: 0.346667rem;
  color: #fff;
  font-weight: 500;
  display: inline-block;
}

.info-other .other .item .text-area-content .can {
  background-color: #1677ff;
}

.info-other .other .item .text-area-content .all {
  width: 8.026667rem;
  position: relative;
  font-size: 0.293333rem;
  color: #999;
  margin-top: 0.32rem;
  margin-bottom: 0.266667rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-down1.png)
    28%/0.266667rem 0.266667rem no-repeat;
}

.info-other .other .item .text-area-content .min {
  max-height: 0;
  overflow: hidden;
}

.info-other .other .item .text-area-content .more .limit {
  display: block;
  margin-bottom: 0.266667rem;
}

.info-other
  .other
  .item
  .text-area-content
  .more
  .region-wrap {
  width: 8.026667rem;
}

.info-other .other .item .content {
  width: 8.026667rem;
  margin-left: 0.426667rem;
  font-size: 0.373333rem;
  color: #666;
  font-weight: 500;
}

.content-wrap .content img {
  width: 100% !important;
  height: auto !important;
}
</style>